<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>S/MIME signature checking</title>

    <script type="application/javascript" src="../../node_modules/babel-polyfill/dist/polyfill.js"></script>
    <script type="text/javascript" src="bundle.js"></script>

    <style type="text/css">
        body{background:#EFEFEF;font:normal 14px/16px Helvetica, Arial, sans-serif;}
        .wrapper{
            width:600px;
            margin:50px auto;
            padding:50px;
            border:solid 2px #CCC;
            border-radius:10px;
            -webkit-border-radius:10px;
            box-shadow:0 0 12px 3px #CDCDCD;
            -webkit-box-shadow:0 0 12px 3px #CDCDCD;
            background:#FFF;
        }
        label{
            font:bold 16px/20px Helvetica, Arial, sans-serif;
            margin:0 0 8px;
        }
        textarea{
            width:500px;
            border:solid 1px #999;
            border-radius:5px;
            -webkit-border-radius:5px;
            height:340px;
            font:normal 10px/13px monospace;
            display:block;
            margin:0 0 12px;
            box-shadow:0 0 5px 5px #EFEFEF inset;
            -webkit-box-shadow:0 0 5px 5px #EFEFEF inset;
            padding:20px;
           resize: none;
        }
        a{
            display:inline-block;
            padding:5px 15px;
            background:#ACD0EC;
            border:solid 1px #4C6181;
            color:#000;
            font:normal 14px/16px Helvetica, Arial, sans-serif;
        }
        a:hover{
            background:#DAEBF8;
            cursor:pointer;
        }
        .header-block {
            margin-top:30px;
            font:bold 16px/20px Helvetica, Arial, sans-serif;
        }
        .border-block{
            border:solid 2px #999;
            border-radius:5px;
            -webkit-border-radius:5px;
            margin:10px 0 0;
            padding:20px 30px;
            background:#F0F4FF;
        }
        .border-block h2{
            margin:0 0 16px;
            font:bold 22px/24px Helvetica, Arial, sans-serif;
        }
        .border-block p{
            margin:0 0 12px;
        }
        .border-block p .type{
            font-weight:bold;
            display:inline-block;
            width:176px;
        }
        .border-block .two-col{
            overflow:hidden;
            margin:0 0 16px;
        }
        .border-block .two-col .subject{
            width:180px;
            font-weight:bold;
            margin:0 0 12px;
            float:left;
        }
        .border-block .two-col #cms-signed-attributes{
            margin:0;
            padding:0;
            float:left;
            list-style:none;
        }
        .border-block .two-col #cms-signed-attributes li p{
            margin:0;
        }
        .border-block .two-col #cms-signed-attributes li p span{
            width:40px;
            display:inline-block;
            margin:0 0 5px;
        }
        .border-block .two-col #cms-signed-exten{
            overflow:hidden;
            padding:0 0 0 17px;
            margin:0;
            list-style-type:square;
        }
        table {
            border:solid;
            border-collapse:collapse;
            border-color:black;
        }
       th { 
        text-align:center;
        background: #ccc;
        padding: 5px;
        border: 1px solid black;
       }
       td { 
        padding: 5px;
        border: 1px solid black; 
       }
    </style>
</head>

<body>
    <div id="cert_div" class="wrapper">
        <p>
            <label for="ca_bundle">Select CA bundle file:</label>
            <input type="file" id="ca_bundle" title="Trusted certs" />
        </p>
        <div class="border-block">
            <p>
                <label for="mime_file">Select S/MIME message file:</label>
                <input type="file" id="mime_file" title="S/MIME message" />
            </p>
            <p>OR</p>
            <p>
                <label for="smime_message" style="font-weight:bold">Put S/MIME signed message here:</label>
                <textarea id="smime_message"></textarea>
            </p>
            <input type="button" value="Verify" onclick="verifySMIME()" />
        </div>
    </div>

    <script>
        document.getElementById('ca_bundle').addEventListener('change', handleCABundle, false);
        document.getElementById('mime_file').addEventListener('change', handleMIMEFile, false);
    </script>
</body>
</html>